$(() => {



    $.ajax({
        url: '/getJob',
        type: 'post',
        dataType: 'json',
        success: res => {
            // console.log(res.zpData);
            let zpStr = ''
            res.zpData.forEach(item => {
                zpStr += `
                <li dataid="${item.code}">
                            <div class="main_title">
                                <p>${item.name}</p>
                                <ul>
                                    <li>Java</li>
                                    <li>PHP</li>
                                    <li>web前端</li>
                                    <li>算法工程师</li>

                                </ul>
                            </div>
                            <div class="icon_gt">
                                <i></i>
                            </div>
                        </li>`
            })

            $('.main_left>ul').html(zpStr)



            $('.main_left').hover(function(e) {
                if (e.target.tagName == 'DIV') {
                    $('.main_left>ul').css('overflow', 'visible')
                }

            }, function() {
                $('.main_left>ul').css('overflow', 'hidden')
            })

            // console.log(zpStr);

            $('.main_left>ul>li').mouseover(function() {
                let hideArr = res.zpData.filter(item => {
                    return item.code == $(this).attr('dataid')
                })

                let hideStr1 = ''
                let hideStr2 = ''
                let hideStr3 = ''
                hideArr.forEach(item => {
                    item.subLevelModelList.forEach(ite => {

                        ite.subLevelModelList.forEach(it => {
                            hideStr3 += ` <a href="JavaScript:;">${it.name}</a>`
                        })

                        hideStr2 += `<li><h4>${ite.name}</h4>
                                <div class="text">
                                   ${hideStr3}
                                </div></li > `
                        hideStr3 = ''
                    })

                    hideStr1 += `
                    <p>${item.name}</p>
                    <ul>${hideStr2}</ul>`
                    hideStr2 = ''
                })
                $('.main_hide').html(hideStr1)

                $('.main_hide').show()
                $('.main_hide').css('top', $(this).position().top)



            })



            $('body').mouseover(function(e) {
                console.log(e.pageY);
                if (e.pageX > 172 && e.pageX < 1243) {

                } else {
                    $('.main_hide').hide()
                }


                if (e.pageY > 305 && e.pageY < 1197) {

                } else {
                    $('.main_hide').hide()
                }
            })

        }
    })







    //弹出层

    $('.switch').click(() => {
        $.ajax({
            url: '/getArea',
            type: 'post',
            dataType: 'json',
            success: function(res) {

                let obj = {
                    name: '空'
                }
                for (let i = 0; i < 4; i++) {
                    if (res.zpData.length % 4 != 0) {
                        res.zpData.push(obj)
                    }
                }
                let areaStr = ''
                res.zpData.forEach(item => {
                    areaStr += `
                    <li>${item.name}站</li>
                    `
                })
                $('.citys ul').html(areaStr)
                $('.citys ul li:contains("空站")').css({
                    visibility: 'hidden'
                })
                $('.citys ul li').click(function() {
                    console.log(123);
                    $('.current_city span').text($(this).text())
                    $('.seclet').text($(this).text().substring(0, $(this).text().length - 1))
                })


            }
        }).done(() => {
            $('.switch_city').show()

        })
    })

    $('#close').click(() => {

        $('.switch_city').hide()

    })


    $(document).scroll(() => {

        if ($(document).scrollTop() < $('body').height() - $('.switch_city').height()) {
            $('.switch_city').css('top', $(document).scrollTop())
        }

        if ($(document).scrollTop() > $('.search_top').offset().top + $('.search_top').height()) {

            $('.search_head').css({
                display: 'flex',
                position: 'fixed',
                top: '0'
            })

        } else {
            $('.search_head').hide()
        }
        if ($(document).scrollTop() <= $('header').height()) {
            $('.silderbar').css('top', -$(document).scrollTop() + $('header').height())

        } else {

            $('.silderbar').css('top', '0')

        }


    })



    let jobArr = null

    let isTrue = false
        //搜索栏
    $('.job_box>.job_type').click(() => {
        if (isTrue == false) {
            $('.hide_job').css('display', 'flex')
            isTrue = true
        } else {
            $('.hide_job').css('display', 'none')
            isTrue = false
        }


        $.ajax({
            url: '/getJob',
            type: 'post',
            dataType: 'json',
            success: res => {
                jobArr = res.zpData

                //遍历数据第一层,并拼接对应需要的code2
                let jobType = '<li dataId="0">不限</li>'
                jobArr.forEach(item => {
                    jobType += `<li dataId='${item.code}'>
                    
                    ${item.name}
                    </li>`

                })

                $('.hide_left>ul').html(jobType)


                //当鼠标移动到第一个盒子的数据时
                $('.hide_left>ul>li').hover(function() {
                        $('.hide_right').css({
                            visibility: 'hidden'
                        })

                        $(this).addClass('selected').siblings().removeClass('selected')
                        let newJobStr = ''
                            //通过对应的code值筛选出第二层的数组
                        if ($(this).attr('dataid') != 0) {
                            let newJob = jobArr.filter((item) => {
                                    return item.code == $(this).attr('dataid')
                                })
                                //取出的数据在遍历拼接2
                            newJob[0].subLevelModelList.forEach(item => {
                                newJobStr += `<li dataid='${item.code}'>
                        ${item.name}

                        </li>`
                            })


                        }
                        $('.hide_middle ul').html(newJobStr)
                        let jobTec
                            //当鼠标移入到第二个盒子的数据的时候
                        $('.hide_middle ul li').hover(function() {
                            $('.hide_right').css({
                                visibility: 'visible'
                            })

                            $(this).addClass('selected').siblings().removeClass('selected')
                                //二次遍历数据,移入到第二个盒子的时候,筛选出对应第三层的的数组
                            jobArr.forEach(item => [
                                    item.subLevelModelList.forEach(li => {

                                        if (li.code == $(this).attr('dataid')) {

                                            jobTec = li.subLevelModelList
                                        }

                                    })
                                ])
                                //遍历筛选的数组,并且拼接相关数据
                            let tecStr = ''
                            jobTec.forEach(item => {
                                tecStr += `<li dataid='${item.code}'>${item.name}</li>`

                            })

                            $('.hide_right ul').html(tecStr)

                            $('.hide_right ul li').hover(function() {
                                $(this).addClass('selected').siblings().removeClass('selected')
                            })
                            $('.hide_right ul li').click(function() {
                                $('.job_type>span').text($(this).text())
                            })
                        }, function() {


                        })


                    },
                    function() {


                    })

            }
        })

    })

    $(document).click((e) => {

        if (e.target.id != 'job_type') {
            $('.hide_job').hide()
        }

    })


    //搜索栏



    //岗位点击切换

    $('.job_title span').click(function() {
        $(this).addClass('current').siblings().removeClass('current')
        $('.up_job ul').eq($(this).attr('index') - 1).show().siblings().hide()
    })














})